<template>
    <div class="app">
       <!-- 01 -->
       <div class="banner">
            <img src="../assets/tab/banner(1).png" alt="">
        </div>
       <div class="tab4">
       
        <div>
            <div class="tab4-1">心理咨询师 （基础课-高级课教材）</div>
            <div class="teach">
                <img src="../assets/tab/teach1.png" alt="">
                <img src="../assets/tab/teach2.png" alt="">
                <img src="../assets/tab/teach3.png" alt="">
            </div>
            <div class="more">
               <span>查看更多</span>
                </div>
        </div>
        <!-- 02 -->
        <div class="tab4">
       
        <div>
            <div class="tab4-2">心理咨询师实操课程 （中级-高级课程）</div>
            <div class="teach">
                <img src="../assets/tab/teach4.png" alt="">
                <img src="../assets/tab/teach5.png" alt="">
                <img src="../assets/tab/teach0.png" alt="">
            </div>
            <div class="more">
               <span>查看更多</span>
                </div>
        </div>

        </div> 
        <!-- 03 -->
        <div class="tab4">
       
       <div>
           <div class="tab4-3">学位课程 （学士-硕士）</div>
           <div class="teach">
               <img src="../assets/tab/teach6.png" alt="">
               <img src="../assets/tab/teach7.png" alt="">
               <img src="../assets/tab/teach0.png" alt="">
           </div>
           <div class="more">
              <span>查看更多</span>
               </div>
       </div>

       </div> 
        </div> 

        <!-- 04 -->
        <div class="tab4">
       
       <div>
           <div class="tab4-4">专项技能培训课程</div>
           <div class="teach">
               <img src="../assets/tab/teach8.png" alt="">
               <img src="../assets/tab/teach0.png" alt="">
               <img src="../assets/tab/teach0.png" alt="">
           </div>
           <div class="more">
              <span>查看更多</span>
               </div>
       </div>

       </div> 
       <!-- 05 -->
       <div class="tab4">
       
       <div>
           <div class="tab4-5">前沿技术</div>
           <div class="teach">
               <img src="../assets/tab/teach9.png" alt="">
               <img src="../assets/tab/teach0.png" alt="">
               <img src="../assets/tab/teach0.png" alt="">
           </div>
           <div class="more">
              <span>查看更多</span>
               </div>
       </div>

       </div> 
        

    </div>
</template>
<script>

</script>
<style scoped >
    .app{
        width:1200px;
        position: relative;
        height: 100%;
    }
    .tab4{
        position: relative;
        margin-top: 20px;
        
    }
    
    .tab4-1{
       
        position: relative;
        left:40%;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .tab4-2{
       
       position: relative;
       left:39%;
       font-weight: bold;
       margin-bottom: 20px;
   }
    .tab4-3{
       
       position: relative;
       left:44%;
       font-weight: bold;
       margin-bottom: 20px;
   }
    .tab4-4{
       
       position: relative;
       left:45%;
       font-weight: bold;
       margin-bottom: 20px;
   }
   .tab4-5{
       
       position: relative;
       left:47%;
       font-weight: bold;
       margin-bottom: 20px;
   }
.banner img{
    width: 1200px;
    height:370px;
    
}
.teach{
    flex: 1;
    /* vertical-align: middle; */
    text-align: center;
    /* position: relative; */
    justify-content:center ;
    display: flex;
}
.teach img{
    width:380px;
    height: 200px;
    margin-left: 10px;
    margin-right: 10px;
}
.more{
    width: 150px;
    height:70px;
    border:1px solid #444444;
    border-left:none;
    border-right: none;
    border-top:none;
    text-align: center;
    position: relative;
    left:44%;
}
.more span {
    position: absolute;
    bottom:13px;
    left:44px
}


</style>